import React from 'react';
import { Form, Input, Checkbox } from 'antd';
import useControlOptions from '../../hooks/useControlOptions';
import { TagProps } from './Tag';

const FormItem = Form.Item;

const Controller = () => {
  const { options, changeControlProps } = useControlOptions<TagProps>('tagProps');

  return (
    <>
      <FormItem label="数据绑定ID" tooltip="数据存储的名称/英文/必填">
        <Input onChange={e => {
          changeControlProps('name', e.target.value, true);
        }} value={options?.name as string} />
      </FormItem>
      <FormItem label="标题">
        <Input onChange={e => {
          changeControlProps('title', e.target.value, true);
        }} value={options.title} />
      </FormItem>
      <FormItem label="标题(EN)">
        <Input onChange={e => {
          changeControlProps('titleEn', e.target.value, true);
        }} value={options.titleEn} />
      </FormItem>
      <FormItem label="显示字段">
        <Input onChange={e => {
          changeControlProps('showFieldName', e.target.value);
        }} value={options?.tagProps?.showFieldName as string} />
      </FormItem>
      <FormItem className="antd-form-item-row" label="是否必填">
        <Checkbox
          checked={options.required}
          onChange={(e) => {
            changeControlProps(
              'required',
              e.target.checked,
              true
            );
          }}
        />
      </FormItem>
    </>
  );
};

export default Controller;
